<template>
	<view class="ayi-page">
		<navigation :isBack="true" title="账户充值" titleTintColor="#fff">
			<text slot="back" class="iconfont">&#xe63d;</text>
			<text slot="string" @click="toServicePage()" class="nav-right-radius">联系客服</text>
		</navigation>
		<view class="account">当前账号:{{ username }}</view>
		<view class="money">
			<view class="m-input">
				<text class="iconfont">&#xe651;</text>
				<input class="uni-input" @input="inputChangeVal" v-model="payNum" placeholder="请输入充值金额" />
			</view>
			<view class="m-grid">
				<view class="m-g-item" @click="onSelectDefaultVal(item)" v-for="(item, index) in inputArr" :key="index">
					<text class="t">{{ item }}元</text>
				</view>
			</view>
		</view>
		<view class="tit-msg">请选择支付方式</view>
		<view class="pay-method">
			<view class="father-item-contain" v-for="(item, index) in wayList" :key="index">
				<view class="father-item" @click="toggleGroup(item)">
					<image class="img-img" mode="aspectFit" :src="item.image"></image>
					<view class="name">{{ item.name }}</view>
					<text class="iconfont">&#xe619;</text>
				</view>
				<view class="son-item-contain" v-if="isGroupShown(item)">
					<view
						class="son-item"
						v-for="(itemSon, indexSon) in item.son_method"
						:key="indexSon"
						@click="selectItem(itemSon)"
						:class="{ selectItem: itemSon.id == tempSelectItemId }"
					>
						<image class="img-img" mode="aspectFit" :src="itemSon.iconimage"></image>
						<view class="name-raw">
							<view class="n-r-raw">
								{{ itemSon.channel_name }}
								<text class="raw">手续费:{{ itemSon.rate }}%</text>
							</view>
							<view class="n-r-tit"><rich-text :nodes="itemSon.note"></rich-text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tit-msg" v-if="isBankList">银行</view>
		<view class="bank-select" v-if="isBankList">
			<view class="b-s-tit">银行</view>
			<view class="b-s-select">
				<picker @change="bindPickerChange" :range="bankListNameArr">
					<view class="uni-input">{{ bankListNameArr[index] }}</view>
				</picker>
				<text class="iconfont">&#xe6b0;</text>
			</view>
		</view>
		<view class="tit-msg" v-if="isAccountName">持卡人姓名</view>
		<view class="username" v-if="isAccountName"><input class="uni-input" v-model="accountName" placeholder="请填写持卡人姓名" /></view>
		<view class="pay-btn" @click="onSubmitPay()">确认支付({{ payNum }})元</view>
		<Tabbar :indexpage="-1"></Tabbar>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';
export default {
	components: { Tabbar, navigation },
	data() {
		return {
			payNum: '', //支付的金额
			inputArr: [], //快捷选择的金额
			username: '', //登陆的账号的用户名
			accountName: '', //持卡人姓名
			bankListArr: [], //支付方式的数据
			bankListNameArr: [], //支付方式的名称
			bankCode: '',
			index: 0, //选中支付方式的下标
			noteStr: '',
			needBankidArr: [],
			wayList: [], //支付方式
			isAccountName: false, //是否需要填写用户名
			isBankList: false, //是否显示银行卡选择
			selectItemData: '', //选中支付方式的数据item
			tempSelectItemId: '' //选中支付方式的一个临时存储的id值
		};
	},
	onLoad() {
		this.getPayData();
		this.getUserName();
	},
	methods: {
		/**
		 * 选中银行卡
		 */
		bindPickerChange(e) {
			this.index = e.target.value;
			this.bankCode = this.bankListArr[this.index]['code'];
			this.isAccountNameFun(this.bankCode);
		},
		/**
		 * 是否需要输入用户名
		 */
		isAccountNameFun(bankCode) {
			bankCode = bankCode.toLocaleUpperCase();
			if (bankCode == 'WEBMM' || bankCode == 'ALIPAY') {
				this.isAccountName = false;
				this.accountName = '';
			} else {
				this.isAccountName = true;
			}
		},
		getUserName() {
			this.$store.commit('getUserInfo');
			this.username = this.$store.state.userinfoStore.userInfo.uinfo.username;
		},
		/**
		 * 确认充值
		 */
		onSubmitPay() {
			if (Tools.isEmpty(this.selectItemData)) {
				VueTools.toastNo('请选择支付方式');
				return;
			}
			if (Tools.isEmpty(this.payNum)) {
				VueTools.toastNo('请输入合法的数据');
				return;
			}
			if (this.isBankList && Tools.isEmpty(this.bankCode)) {
				VueTools.toastNo('请选择银行');
				return;
			}
			if (this.isBankList && !Tools.isEmpty(this.bankCode) && this.isAccountName && Tools.isEmpty(this.accountName)) {
				VueTools.toastNo('请填写持卡人姓名');
				return;
			}

			if (parseFloat(this.selectItemData.min) < 1 && parseFloat(this.payNum) < 1) {
				VueTools.toastNo('最小充值1元');
				return;
			} else if (parseFloat(this.selectItemData.min) > 1) {
				if (parseFloat(this.payNum) < parseFloat(this.selectItemData.min)) {
					VueTools.toastNo('最小充值' + this.selectItemData.min + '元');
					return;
				} else if (parseFloat(this.payNum) > parseFloat(this.selectItemData.max)) {
					VueTools.toastNo('最大充值' + this.selectItemData.max + '元');
					return;
				}
			}
			let way_id = this.selectItemData.way_id;
			let is_url = this.selectItemData.is_url;
			if (way_id == 1 || way_id == '1' || is_url == 1 || is_url == '1') {
				let param =
					'{"num":"' + this.payNum + '","wid":"' + this.selectItemData.channel_way_id + '","code":"' + this.bankCode + '","account_name":"' + this.accountName + '"}';
				this.navigateToSigleUrl('/pages/recharge/accountrechargeweb/accountrechargeweb?p=' + encodeURIComponent(Tools.paramAESEncrypt(param)));
			} else {
				VueTools.toastNo('程序猿在加急处理中...');
			}
		},
		getPayData() {
			let that = this;
			Net.ayiHttp(
				URL.OTHER_INCASH,
				'{}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let resData = Tools.aesDecodeToJson(res.data);
						that.inputArr = resData.selectMoneyArr;
						that.wayList = that.dealData(resData.wayList, resData.channel_wayList);
						that.noteStr = resData.note;
						that.bankListArr = resData.banks;
						that.bankCode = that.bankListArr[0]['code'];
						that.isAccountNameFun(that.bankCode);
						for (let item in that.bankListArr) {
							that.bankListNameArr[item] = that.bankListArr[item]['name'];
						}
						that.needBankidArr = resData.need_bankid;
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		/**
		 * 数据的拼合
		 * @param wayList 类别数组
		 * @param channel_wayList 子数组
		 */
		dealData(wayList = [], channel_wayList = []) {
			let resArr = [];
			for (let item in wayList) {
				let way_id = wayList[item].id;
				let tempArr = [];
				for (let item1 in channel_wayList) {
					let way_id1 = channel_wayList[item1].way_id;
					if (way_id == way_id1) {
						channel_wayList[item1].active = false;
						tempArr.push(channel_wayList[item1]);
					}
				}
				if (tempArr.length > 0) {
					wayList[item].show = false;
					wayList[item].son_method = tempArr;
					resArr.push(wayList[item]);
				}
			}
			return resArr;
		},
		/**
		 * 选中快捷金额
		 * @param {Object} val 快捷金额的值
		 */
		onSelectDefaultVal(val) {
			this.payNum = val;
		},
		/**
		 * 将输入的不规范的值变成有效的输入值
		 * @param {Object} event
		 */
		inputChangeVal(event) {
			var value = event.target.value;
			this.payNum = Tools.moneyFormat(value + '', true, true);
		},
		/**
		 * 跳转到服务的页面
		 */
		toServicePage() {
			uni.switchTab({
				url: '/pages/my/my'
			});
		},
		toggleGroup(item) {
			item.show = !item.show;
		},
		isGroupShown(item) {
			return item.show;
		},
		/**
		 * 选中支付方式处理的数据
		 * @param {Object} item 选中支付方式的item数据
		 * @param {Object} itemsonId  选中的支付方式的id
		 */
		selectItem(item) {
			if (this.tempSelectItemId + '' == item.id + '') {
				this.tempSelectItemId = '';
				this.selectItemData = '';
				this.isBankList = false;
			} else {
				this.tempSelectItemId = item.id;
				this.selectItemData = item;
				if (this.isExitVal(this.needBankidArr, item.id)) {
					this.isBankList = true;
				} else {
					this.isBankList = false;
				}
			}
		},
		/**
		 * 判断一维数组中是否存在值
		 * @param arr 目标一维数组
		 * @param val 目标的值
		 */
		isExitVal(arr, val) {
			let isExit = false;
			if (arr.indexOf(val) > -1) {
				isExit = true;
			}
			return isExit;
		}
	},
	onUnload() {}
};
</script>

<style lang="scss">
.account,
.money,
.pay-method,
.bank-select,
.username {
	border-radius: 10rpx;
	margin: 20rpx 20rpx;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.account {
	height: 80rpx;
	text-align: left;
	font-size: 28rpx;
	line-height: 80rpx;
	padding-left: 20rpx;
	color: #555555;
	margin-top: 20rpx;
}
.money {
	padding: 20rpx 20rpx;
	.m-input {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 1px solid #e8e9ec;
		padding-bottom: 12rpx;
		.iconfont {
			font-size: 40rpx;
			color: #efb336;
			font-weight: bold;
			padding-right: 20rpx;
		}
		.uni-input {
			font-size: 28rpx;
		}
	}
	.m-grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		.m-g-item {
			width: 200rpx;
			height: 80rpx;
			padding: 10rpx;
			.t {
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #e8e9ec;
				width: 100%;
				height: 100%;
				color: #555555;
				font-size: 28rpx;
			}
		}
	}
}
.pay-method {
	padding: 20rpx;
	.father-item {
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1px solid #e8e9ec;
		.img-img {
			width: 70rpx;
			height: 70rpx;
			flex: 70;
		}
		.name {
			flex: 260;
			font-size: 34rpx;
			color: #666;
		}
		.iconfont {
			flex: 50;
			text-align: right;
		}
	}
	.son-item {
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.img-img {
			width: 180rpx;
			height: 70rpx;
			flex: 120;
		}
		.name-raw {
			flex: 260;
			color: #666;
			.n-r-raw {
				font-size: 34rpx;
				.raw {
					font-size: 16rpx;
				}
			}
			.n-r-tit {
				font-size: 8px;
				color: red;
			}
		}
	}
}
.bank-select {
	height: 88rpx;
	padding: 0px 20rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: 34rpx;
	color: #555;
	.b-s-select {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
}
.username {
	height: 88rpx;
	padding: 0rpx 20rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.tit-msg {
	color: #555555;
	font-size: 28rpx;
	height: 60rpx;
	line-height: 60rpx;
	padding-left: 20rpx;
	display: flex;
	align-items: center;
}
.pay-btn {
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 34rpx;
	border-radius: 20rpx;
	background: linear-gradient(to right, #fa5863, #ef425e);
	margin: 100rpx 20rpx 0rpx;
}
.selectItem {
	background: #e8e9ec;
}
</style>
